<!-- 美食指南 -->
<template>
    <div style="background-color: #efefef">

        <!-- 导航条 -->
        <van-sticky>
            <van-nav-bar class="nav" left-arrow="true" @click-left="onClickLeft">
                <template #right>
                    <div style="display: flex;">
                        <span
                            style="color: rgb(105, 58, 19); margin-right: 30px;font-size: 22px;font-weight: bold;">西安指南</span>
                        <div
                            style="color: #fff;width: 200px; font-size: 10px;display: flex; justify-content: space-around;">
                            <span><van-icon name="eye-o" />找相似</span>
                            <span><van-icon name="smile-comment-o" />写评价</span>
                            <span @click="showShare = true"><van-icon name="share-o" />分享</span>
                        </div>
                    </div>
                </template>
            </van-nav-bar>
        </van-sticky>

        <!-- 灰色空白间距 -->
        <div style="background-color: #EFEFEF;height: 10px;"></div>
        <!-- 内容 -->
        <div class="content">
            <p style="font-size: 18px;font-weight: bold;margin: 5px;">小胡同番茄火锅 (亲贤店)</p>
            <div style="display: flex;align-items: center;">
                <van-rate size="14px" v-model="value" />&nbsp;
                <p style="font-size: 14px;color: red;font-weight: bold;">4.6</p>
                <span>1条评论</span>
                <span>￥67/人</span>
                <span>串串香</span>
            </div>
            <div>
                <van-tag color="#E1C763" text-color="rgb(105, 58, 19)"><b>西安指南</b></van-tag>
                <van-tag size="10px" color="#E2BB9C" text-color="rgb(105, 58, 19)">体育路人气最高的串串香&nbsp;&nbsp;&nbsp;<b>第9名</b>
                    &gt;</van-tag>
            </div>
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item><img src="../../assets/shop/16.webp" alt=""></van-swipe-item>
                <van-swipe-item><img src="../../assets/shop/20.webp" alt=""></van-swipe-item>
                <van-swipe-item><img src="../../assets/shop/15.webp" alt=""></van-swipe-item>
                <van-swipe-item><img src="../../assets/shop/13.webp" alt=""></van-swipe-item>
            </van-swipe>
            <div style="display: flex; justify-content: space-between;">
                <div>
                    <span style="color: rgb(15, 120, 85);">营业中</span>
                    <span>00:00-24:00</span>
                </div>
                <div>使用信息<van-icon name="arrow" /></div>
            </div>
            <van-notice-bar color="#888" background="#fff" left-icon="volume-o" :scrollable="false">
                <van-swipe vertical class="notice-swipe" :autoplay="3000" :touchable="false" :show-indicators="false">
                    <van-swipe-item>
                        <img style="width: 20px;border-radius: 20px;transform: translateY(3px);"
                            src="https://picnew11.photophoto.cn/20170915/baisexiaomaoxiaogousheying-28828908_1.jpg" alt="">
                        徐奥前购买了团购套餐,便宜53元</van-swipe-item>
                    <van-swipe-item>
                        <img style="width: 20px;border-radius: 20px;transform: translateY(3px);"
                            src="https://img2.baidu.com/it/u=359303583,3713234891&fm=253&fmt=auto&app=120&f=JPEG?w=440&h=440"
                            alt="">
                        9213*2313购买了,便宜36元。</van-swipe-item>
                    <van-swipe-item>
                        <img style="width: 20px;border-radius: 20px;transform: translateY(3px);"
                            src="https://img1.baidu.com/it/u=1265820599,3252342407&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=546"
                            alt="">
                        ac**123购买了这家店的商品,便宜53元</van-swipe-item>
                </van-swipe>
            </van-notice-bar>
            <!-- 优惠券单元格 -->
            <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />
            <!-- 优惠券列表 -->
            <van-popup v-model:show="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
                <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons"
                    @change="onChange" @exchange="onExchange" />
            </van-popup>
        </div>
        <!-- 灰色空白间距 -->
        <div style="background-color: #EFEFEF;height: 10px;"></div>
        <div class="content" style="display: flex; justify-content: space-between; flex-direction: row;">
            <div>
                <b
                    style="background-color: rgba(189, 18, 18, 0.657);padding: 3px; color: #fff;border: 1px solid rgba(189, 18, 18, 0.657);">高德红包</b>
                <b
                    style="padding: 3px;color:rgba(189, 18, 18, 0.657) ; border: 1px solid rgba(189, 18, 18, 0.657);">满85减2</b>
            </div>
            <div>领取 <van-icon name="arrow" /></div>
        </div>
        <!-- 灰色空白间距 -->
        <div style="background-color: #EFEFEF;height: 10px;"></div>
        <div class="content">
            <div style="flex-direction: row; align-items: center; line-height: 40px;">
                <span style="float: left;"><van-icon name="orders-o" /></span> <span
                    style="display: flex;align-items: center; justify-content: space-between;">查看食品安全档案<van-icon
                        name="arrow" /></span>
            </div>
            <div style="flex-direction: row; align-items: center; line-height: 40px;">
                <span style="float: left;"><van-icon name="shield-o" /></span> <span
                    style="display: flex;align-items: center; justify-content: space-between;">查看商家青山档案<van-icon
                        name="arrow" /></span>
            </div>
        </div>

        <!-- 灰色空白间距 -->
        <div style="background-color: #EFEFEF;height: 10px;"></div>
        <div class="content">
            <div style="flex-direction: row; align-items: center; line-height: 40px;">
                <van-icon name="records" /> <span>配送服务：有保障的配送</span>
            </div>
            <div style="flex-direction: row; align-items: center; line-height: 40px;">
                <van-icon name="underway-o" /> <span>配送时间：09:00-22:30</span>
            </div>
        </div>
        <!-- 灰色空白间距 -->
        <div style="background-color: #EFEFEF;height: 10px;"></div>
        <div class="content">
            <div style="flex-direction: row; align-items: center; line-height: 40px;">
                <van-icon name="smile" /> <span>商家服务：<van-icon name="phone-o" />跨天预定</span>
            </div>
            <div style="flex-direction: row; align-items: center; line-height: 40px;">
                <van-icon name="volume-o" />
                <span>商家公告：亲爱的顾客发票满100元起开,本店食材有美菜网提供,严格通过检疫,请放心食用,由于中午用餐人数较多,请提前下预订单,本店长期遁寻着用良心做品质,用口味做回报的办点理念,竭诚为广大消费者带来更优质的餐饮服务,欢迎新老顾客前来!</span>
            </div>
        </div>
        <!-- 灰色空白间距 -->
        <div style="background-color: #EFEFEF;height: 10px;"></div>

        <!-- 回到顶部 -->
        <van-back-top right="0" bottom="60px" />
        <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
    </div>
</template>

<script setup>

import { ref } from 'vue';
const onClickLeft = () => history.back();

const value = ref(3);
const coupon = {
    available: 1,
    condition: '无门槛\n最多优惠12元',
    reason: '',
    value: 150,
    name: '优惠券名称',
    startAt: 1489104000,
    endAt: 1514592000,
    valueDesc: '1.5',
    unitDesc: '元',
};

const coupons = ref([coupon]);
const showList = ref(false);
const chosenCoupon = ref(-1);

const onChange = (index) => {
    showList.value = false;
    chosenCoupon.value = index;
};
const onExchange = () => {
    coupons.value.push(coupon);
};


const showShare = ref(false);
    const options = [
      [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
      ],
      [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
      ],
    ];

    const onSelect = (option) => {
      (option.name);
      showShare.value = false;
    };
</script>

<style lang="scss" scoped>
.notice-swipe {
    height: 40px;
    line-height: 40px;
}

.my-swipe .van-swipe-item {

    border-radius: 20px;
    width: 100%;
    height: 200px;
    overflow: hidden;

    img {

        height: 100%;
        object-fit: cover;
        width: 100%;
    }
}


.nav {
    background-color: rgb(226, 187, 156);
}

.content {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    // transform: translateY(10px);
    padding: 5px;
    background-color: #fff;
    border-radius: 5px;
    width: calc(100% - 30px);

    // border: 1px solid;
    span {
        margin: 0 5px;
        font-size: 14px;
    }

    >div {
        margin: 5px;
    }
}
</style>